@charset "utf-8";


.week-item {
	display: inline-block;
	width: 180px;
	height: 130px;
	line-height: 130px;
	text-align: center;
	color: #ff9800;
    font-size: 16px;
}

.date-item {
	width: 180px;
	height: 120px;
	border: 1px solid #cbd2d2;
	text-align: left;
	font-size: 13px;
}

.date-item:hover {
	cursor: pointer;
}

.date-item .content {
	padding: 10px 0px 0px 10px;
	font: 13px;
}

.date-item .content .weekRange {
	float: right;
	padding-right: 10px;
	color: #ccc;
}

.date-item .date-content {
	text-align: center;
	font-size: 13px;
	margin-top: 10px;
}

#weekLine {
	display: flex;
	justify-content: center;
}

#weekLine .week-item {
	height: 50px;
	line-height: 50px;
}

.date-line {
	display: flex;
	justify-content: center;
}

.disabled {
	background-color: #e7e7e7;
	color: #afa9a9;
}

#year-line {
	display: flex;
	justify-content: center;
}

.month-prev,
.year-prev {
	border: 1px solid var(--themeColor);
	border-radius: 3px;
	margin-right: 8px;
	padding: 0px 15px;
	color: var(--themeColor);
}

.month-prev:hover,
.year-prev:hover {
	cursor: pointer;
    background-color: var(--themeColor);
    color: var(--themeFontColor);
}

.date-now {
	font-size: 20px;
	color: var(--themeColor);
}

.month-next,
.year-next {
	border: 1px solid var(--themeColor);
	border-radius: 3px;
	margin-left: 8px;
	padding: 0px 15px;
	color: var(--themeColor);
}

.month-next:hover,
.year-next:hover {
	cursor: pointer;
    background-color: var(--themeColor);
    color: var(--themeFontColor);
}

.date-head {
	width: 68px;
	min-width: 68px;
	height: 120px;
	line-height: 120px;
	border: 1px solid #ccc;
	text-align: center;
	background-color: #f2f7f9;
	color: #2196f3;
}

#dateWrap {
	margin-top: 20px;
}

#year-line{
    margin-top: 10px;
}